<script setup>
import { ref } from 'vue'

// 选择壁纸文件
function selectWallpaper() {
  window.api.selectWallpaper()
  getWallpaperList()
}

const isloopWallpaper = ref(false)

// 循环壁纸
function loopWallpaper(state, interval) {
  isloopWallpaper.value = state
  window.api.loopWallpaper(state, interval)
}

const wallPapers = ref([])
// 获取壁纸列表
async function getWallpaperList() {
  wallPapers.value = await window.api.getWallpaperList()
  console.log(wallPapers.value, ' wallPapers.value', wallPapers.value.length)
}

const interval = ref(2000)
</script>

<template>
  <div class="setting-div">
    <div class="other-seeting no-drag">
      <button class="no-drag" @click="selectWallpaper">选择壁纸文件</button>
      <!-- <label for="">循环时间间隔</label><input id="" v-model="interval" type="number" name="" />
      <button class="no-drag" :disabled="isloopWallpaper" @click="loopWallpaper(true, interval)">
        开始循环壁纸
      </button>
      <button class="no-drag" :disabled="!isloopWallpaper" @click="loopWallpaper(false, interval)">
        终止循环壁纸
      </button> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.setting-div {
  display: flex;
  flex: 1;
  height: 100%;
  padding: 10px;
  justify-content: center;
  align-items: center;

  .other-seeting {
    display: flex;
    height: 32px;
    button {
      display: flex;
      flex: 1;
      border-radius: 6px;
      // width: 40%;
      padding: 10px 20px;
      margin-right: 10px;
      box-shadow: 0px 2px 3px blueviolet;
    }
  }
}
</style>
